<template>
  <div style="display: flex;align-items:center;height: 35px" :style="{'--theme': $store.getters.themeColor}">
    <span v-show="!muted" class="iconfont icon-a-193yinlianglabashengyin-xianxing1" @click="audioMuted"  ></span>
    <span v-show="muted" class="iconfont icon-tongyong_icon_shipindibugongneng_jingyin" @click="audioMuted"  ></span>
    <el-slider
      v-model="sliderTime"
      :show-tooltip="false"
      @change="changeCurrentTime"
      class="slider"
    ></el-slider>
    <span v-show="isPlay" class="iconfont icon-caozuo-bofang-zanting" @click="audioPause"  ></span>
    <span v-show="!isPlay" class="iconfont icon-liebiao-bofang" @click="audioPlay"  ></span>
  </div>
</template>

<script>
export default {
  name: "audioPlay",
  props:{
    voice:{
      type:String,
      default:()=>''
    }
  },
  watch:{
    voice:{
      handler(val){
        this.getAudioTime();
      },
      immediate:true
    }
  },
  data(){
    return {
      sliderTime:0,
      isPlay: false,
      muted:false,
      audioLength:0,
      audio:null
    }
  },
  methods:{
    audioMuted(){
      this.audio.muted = !this.audio.muted;
      this.muted = this.audio.muted;
    },
    changeCurrentTime(index){
      this.audio.currentTime = parseInt((index / 100) * this.audioLength+'')
    },
    audioPlay(){
      if(!this.audio) { return };
      this.audio.play();
      this.isPlay = true;
    },
    audioPause(){
      if(!this.audio) { return };
      this.audio.pause();
      this.isPlay = false;
    },
    onTimeupdate(res){
      this.sliderTime = parseInt(((res.target.currentTime / this.audioLength) * 100)+'');
    },
    getAudioTime() {
      // debugger
      if(!this.voice) { return }
      this.audio = new Audio(this.voice);
      this.audio.addEventListener('canplaythrough', ()=> {
        this.audioLength = this.audio.duration;
      });
      this.audio.addEventListener('timeupdate',this.onTimeupdate);
      this.audio.addEventListener('ended',()=>{
        this.isPlay = false;
      })
    },
  }
}
</script>

<style scoped lang="scss">
$theme: var(--theme);
.slider {
  display: inline-block;
  margin-right: 6px;
  position: relative;
  margin-left: 10px;
  width: 120px;
  line-height: 30px;
  /deep/.el-slider__button-wrapper {
    height: 20px;
    width: 20px;
    top: -9px;
  }
}
/deep/.el-slider__runway {
  margin: 13px 0;
  height: 4px;
  background-color: #DCDFE6;
}
/deep/.el-slider__button {
  height: 12px;
  width: 12px;
  border: 2px solid $theme;
}
/deep/.el-slider__button-wrapper {
  height: 33px;
  width: 17px;
}
/deep/.el-slider__bar {
  height: 4px;
  background-color: $theme;
}
</style>
